<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<script src="js/commom.js"></script>
		<!-- <script src="js/jquery.min.js"></script> -->
		<script src="laydate/laydate.js"></script>
		<script src="jquery/jquery-3.1.1.min.js"></script>
		<script src="js/vue.js"></script>
		<script src="js/scroll.js"></script>
		<title>顺和物联统一调度平台</title>
		<link rel="stylesheet" href="css/order.css">
		<link rel="stylesheet" href="css/asidenav.css">

	<body>
		<div class="page">
			<div class="title">
				<div class="titleTxt">顺和物联统一调度平台</div>
				<div class="time">
					<div id="showTime"></div>
					<!-- <div id="localtime"></div> -->
					<script type="text/javascript">
						function showLocale(objD) {
							var str, colorhead, colorfoot;
							var yy = objD.getYear();
							if (yy < 1900) yy = yy + 1900;
							var MM = objD.getMonth() + 1;
							if (MM < 10) MM = '0' + MM;
							var dd = objD.getDate();
							if (dd < 10) dd = '0' + dd;
							var hh = objD.getHours();
							if (hh < 10) hh = '0' + hh;
							var mm = objD.getMinutes();
							if (mm < 10) mm = '0' + mm;
							var ss = objD.getSeconds();
							if (ss < 10) ss = '0' + ss;
							var ww = objD.getDay();
							str = yy + "-" + MM + "-" + dd + " " + hh + ":" + mm + ":" + ss;
							//alert(str);
							return str;
						}

						function tick() {
							var today;
							today = new Date();
							document.getElementById("showTime").innerHTML = showLocale(today);
							window.setTimeout("tick()", 1000);
						}
						tick();
					</script>
				</div>
			</div>

			<div class="page">
				<div class="ball">
					<svg width="0" height="0">
						<defs>
							<filter id="goo">
								<feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur"></feGaussianBlur>
								<feColorMatrix in="blur" mode="matrix"
									values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 19 -9" result="goo"></feColorMatrix>
								<feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
							</filter>
						</defs>
					</svg>
					<div class="aside-nav bounceInUp animated" id="aside-nav">
						<label for="" class="aside-menu" title="按住拖动">菜单</label>

						<a href="#" onclick="index()" title="首页" class="menu-item menu-first">首页</a>
						<a href="#" onclick="order()" title="订单" class="menu-item menu-second">订单</a>
						<a href="#" onclick="car()" title="车辆" class="menu-item menu-third">车辆</a>

					</div>
				</div>

				<script>
					function index() {
						window.location.href = "index.html"
					}

					function order() {
						window.location.href = "order.html"
					}

					function car() {
						window.location.href = "driver.html"
					}
				</script>
				<script src="js/asidenav.js"></script>
				<div>
					<div class="search">
						<div>订单时间（时间段）<input name="time" id="test1" type="text" placeholder="请选择开始时间"><span
								class="line"></span><input id="test2" name="times" placeholder="请选择结束时间" type="text">
						</div>
						<div>订单号<input type="text" name="order" placeholder="请填写订单号"></div>
						<div>业务类型<select id="select" onchange="doSome();">
								<option value="">请选择业务类型</option>
								<option value="1">三方</option>
								<option value="2">tms</option>
								<option value="3">仓储</option>
								<option value="4">取货郎</option>
							</select>
						</div>

						<div>
							<input class="button" onclick="btn()" type="button" value="查询">
							<!-- <input class="button" type="button" onclick="hover()" value="暂停"> -->
						</div>
					</div>

					<div class="content box" id="orderDetail">
						<div class="contentTitle">
							<div>订单号</div>
							<div>下单时间</div>
							<div>订单类型</div>
							<div>发货人</div>
							<div>发货电话</div>
							<div>发货地址</div>
							<div>收货人</div>
							<div>收货电话</div>
							<div>收货地址</div>

						</div>
						<div class="contentBox list_lh">
							<ul>
								<li class="contentList bgs " v-if="result==''">无订单</li>
								<li v-else class="contentList bg " v-cloak v-for="(item, index) in result"
									:data-order="item.orderSn" :data-ordertype="item.orderType"
									@click="goToFour($event)" :key="index">
									<div>{{item.orderSn}}</div>
									<div>{{getPartTime(item.addTime)}}</div>
									<div>{{item.orderType==1?'三方':item.orderType==2?'tms':item.orderType==3?'仓储':'取货郎'}}
									</div>
									<div>{{item.senderName}}</div>
									<div>{{item.senderMobile}}</div>
									<div>{{item.senderAddress}}</div>
									<div>{{item.receiverName}}</div>
									<div>{{item.receiverMobile}}</div>
									<div>{{item.receiverAddress}}</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
	</body>
</html>

<script>
	laydate.render({
		elem: '#test1', //指定元素
		trigger: 'click',
		value: new Date(),
		format: 'yyyy-MM-dd',
	});
	laydate.render({
		elem: '#test2', //指定元素
		trigger: 'click',
		value: new Date(),
		format: 'yyyy-MM-dd',
	});
</script>

<script>
	var app = new Vue({
		el: '#orderDetail',
		data: {
			result: [],
		},
		mounted: function() {},
		methods: {
			//执行一个laydate实例
			doSome: function() {
				var options = $("#select option:selected").val();
				console.log($("#select option:selected").val())
			},
			getPartTime(val) {
				var timearr = val.replace(" ", ":").replace(/\:/g, "-").split("-");
				console.log(val)
				var timestr = Number(timearr[0]) + "-" + Number(timearr[1]) + "-" + timearr[2];
				return timestr;
			},
			goToFour(e) {
				console.log(e)
				var orderSn = e.currentTarget.dataset.order;
				var orderType = e.currentTarget.dataset.ordertype;
				console.log(orderSn)
				console.log(orderType)
				window.location.href = "driverDetails.html?orderSn=" + orderSn + '&orderType=' + orderType;
			},
			submit(e) {
				var mobi = $('input[name="order"]').val();
				var startTimes = $('input[name="time"]').val();
				var endTimes = $('input[name="times"]').val();
				var options = $("#select option:selected").val();
				var _data = {
					orderSn: mobi,
					orderType: options,
					startTime: startTimes,
					endTime: endTimes
				}
				console.log(_data)
				var that = this
				$.ajax({
					/***********初始化获取全部设备坐标********/
					url: API_SERVER_URL + "order_querylist",
					type: 'POST',
					datatype: 'jsonp',
					data: _data,
					success: function(data) {
						console.log(data)
						that.result = data.data;
						console.log(this.result)
					},
					error: function(e) {
						console.log(e)
					}
				})
			}
		},
	})
	btn();

	function btn() {
		var mobi = $('input[name="order"]').val();
		var startTimes = $('input[name="time"]').val();
		var endTimes = $('input[name="times"]').val();
		var options = $("#select option:selected").val();
		var _data = {
			orderSn: mobi,
			orderType: options,
			startTime: startTimes,
			endTime: endTimes
		}
		console.log(_data)
		$.ajax({
			/***********初始化获取全部设备坐标********/
			url: API_SERVER_URL + "order_querylist",
			type: 'POST',
			async: false,
			datatype: 'jsonp',
			data: _data,
			success: function(data) {
				console.log(data)
				app.result = data.data
				$(function() {
					$("div.list_lh").myScroll({
						speed: 50, //数值越大，速度越慢
						rowHeight: 76 //li的高�?
					});
				});
			},
			error: function(e) {
				console.log(e)
			}
		})
	}
</script>
